<template>
  <div @click="showPopup">
    <slot></slot>
  </div>
  <van-popup v-model:show="show" round position="bottom">
    <van-picker
      :model-value="pickerValue"
      :columns="columns"
      @cancel="show = false"
      @confirm="onConfirm"
      option-height="100px"
    />
  </van-popup>
</template>
<script setup>
import { ref, toRefs } from 'vue'
import { getCode } from '@/libs/code'
import { onMounted } from 'vue'
const props = defineProps({
  code: {
    required: true, // 是否必传
    type: String // 类型
  },
  value: {
    required: true, // 是否必传
    type: String // 类型
  },
  name: {
    required: false, // 是否必传
    type: String // 类型
  }
  //   show: {
  //     required: true, // 是否必传
  //     type: Boolean
  //   }
})
const { code } = toRefs(props)

const emits = defineEmits(['update:value', 'update:name'])
const columns = ref([])
onMounted(async () => {
  const codes = await getCode(code.value)
  columns.value = codes.map((item) => ({ text: item.itemName, value: item.itemValue }))
})
const show = ref(false)
function showPopup() {
  show.value = true
}
const pickerValue = ref([])
function onConfirm({ selectedValues, selectedOptions }) {
  pickerValue.value = selectedValues
  emits('update:value', selectedValues[0])
  emits('update:name', selectedOptions[0].text)
  show.value = false
}
</script>
